@import '~@vue/ui/dist/vue-ui.css'

@import 'imports'
@import 'transitions'


@font-face
  font-family 'Roboto'
  font-style normal
  font-weight 400
  src local('Roboto'), local('Roboto-Regular'), url(../assets/Roboto-Regular.woff2) format('woff2')

.toggle-recording .vue-ui-icon
  svg
    fill #999 !important
  &.enabled
    border-radius 50%
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, .4))
    svg
      fill red !important

.vue-ui-icon
  display inline-block
  width 22px
  height @width
  svg
    width 100%
    height 100%
    fill #999
    pointer-events none
  &.big
    transform scale(1.3)
  &.medium
    transform scale(0.9)
  &.small
    transform scale(0.8)

html, body
  margin 0
  padding 0
  font-family Roboto
  font-size 16px
  color #444

body
  overflow hidden

*
  box-sizing border-box

$arrow-color = $vue-ui-color-dark

.arrow
  display inline-block
  width 0
  height 0
  &.up
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-bottom 6px solid $arrow-color
  &.down
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-top 6px solid $arrow-color
  &.right
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-left 6px solid $arrow-color
  &.left
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-right 6px solid $arrow-color

  .vue-ui-dark-mode &
    $arrow-color = rgba($vue-ui-color-light-neutral, .4)
    &.up
      border-bottom-color $arrow-color
    &.down
      border-top-color $arrow-color
    &.right
      border-left-color $arrow-color
    &.left
      border-right-color $arrow-color

.notice
  display flex
  align-items center
  height 100%
  width 100%
  color #aaa
  div
    text-align center
    padding 0.5em
    margin 0 auto

.selectable-item
  background-color $background-color
  &:hover
    background-color $hover-color
  &.selected,
  &.active
    background-color $active-color
    color #fff
    .arrow
      border-left-color #fff
    .item-name
      color #fff

  .vue-ui-dark-mode &
    background-color $dark-background-color
    &:hover
      background-color $dark-hover-color
      .arrow
        border-left-color #666
    &.selected,
    &.active
      color #fff
      background-color $active-color

.list-item
  color $pink
  .vue-ui-dark-mode &
    color $lightPink
  @extends .selectable-item

.icon-button
  cursor pointer
  &:hover svg
    fill $green

.scroll
  position relative

.keyboard
  display inline-block
  min-width 22px
  text-align center
  background rgba($grey, .3)
  padding 2px 4px 0
  border-radius 3px
  margin-bottom 6px
  box-shadow 0 3px 0 rgba($grey, .2)
  .vue-ui-dark-mode &
    background rgba($grey, .9)
    box-shadow 0 3px 0 rgba($grey, .6)

.mono
  font-family Menlo, Consolas, monospace

.green
  color $green
  .vue-ui-icon svg
    fill @color

.input-example
  background $white
  color $green
  font-size 12px
  padding 0px 8px 6px
  margin 2px
  border-radius 2px
  display inline-flex
  align-items baseline
  vertical-align baseline
  .vue-ui-dark-mode &
    background $dark-background-color
  &,
  .v-popper__popper.v-popper--theme-tooltip .v-popper__inner &
    .vue-ui-icon
      position relative
      top 4px
      margin-right 4px
      transform scale(.8)
      svg
        fill #444
        .vue-ui-dark-mode &
          fill #ccc

.v-popper__popper.v-popper--theme-tooltip
  pointer-events none
  font-size 12px

  .vue-ui-icon
    width 16px
    height @width
    vertical-align middle

.vue-ui-dark-mode .v-popper__popper.v-popper--theme-tooltip .vue-ui-icon svg
  fill #666